<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Modal Menu Slider</title>
    <link
      rel="stylesheet"
      href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.11.2/css/all.min.css"
      integrity="sha256-+N4/V/SbAFiW1MPBCXnfnP9QSN3+Keu+NlB+0ev/YKQ="
      crossorigin="anonymous"
    />
    <link rel="stylesheet" href="./style.css" />
  </head>
  <body class="show-nav">
    <!-- 侧边导航栏 start -->
    <nav>
      <div class="logo">
        <img src="./pic.jpg" alt="logo" />
      </div>
      <ul>
        <li><a href="#">HOME</a></li>
        <li><a href="#">PORTFOLIO</a></li>
        <li><a href="#">BLOG</a></li>
        <li><a href="#">CONTACTME</a></li>
      </ul>
    </nav>
    <!-- 侧边导航栏 end -->

    <!-- 头部 start -->
    <header>
      <button class="nav-btn">
        <i class="fa fa-bars fa-2x"></i>
      </button>
      <h1>My Landing Page</h1>
      <p>
        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Tenetur, amet!
      </p>
      <button class="sign-btn">Sigin Up</button>
    </header>
    <!-- 头部 end -->

    <!-- 内容区 start -->
    <div class="container">
       <h2>What is this landing page about?</h2>
       <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Mollitia iure accusamus ab consectetur eos provident ipsa est perferendis architecto. Provident, quaerat asperiores. Quo esse minus repellat sapiente, impedit obcaecati necessitatibus.</p>

       <h2>Tell Me More</h2>
       <p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Repellat eaque delectus explicabo qui reprehenderit? Aspernatur ad similique minima accusamus maiores accusantium libero autem iusto reiciendis ullam impedit esse quibusdam, deleniti laudantium rerum beatae, deserunt nemo neque, obcaecati exercitationem sit. Earum.</p>

       <h2>Benefits</h2>
       <ul>
           <li>Lifetime Access</li>
           <li>30 Day Money Back</li>
           <li>Tailored Customer Support</li>
       </ul>
       <p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Esse quam nostrum, fugiat, itaque natus officia laborum dolorum id accusantium culpa architecto tenetur fuga? Consequatur provident rerum eius ratione dolor officiis doloremque minima optio dignissimos doloribus odio debitis vero cumque itaque excepturi a neque, expedita nulla earum accusamus repellat adipisci veritatis quam. Ipsum fugiat iusto pariatur consectetur quas libero dolor dolores dolorem, nostrum ducimus doloremque placeat accusamus iste, culpa quaerat consequatur?</p>

    </div>
    <!-- 内容区 end -->

    <script src="./script.js"></script>
  </body>
</html>
